<template>
  <div>
    <medicalCard title="陪诊师列表">
      <template v-slot:head>
        <Form ref="formInline" :label-width="70" inline>
          <FormItem label="姓名">
            <Input v-model="params.name" type="text" clearable placeholder="姓名" class="headFormItemWidth" />
          </FormItem>
          <FormItem label="身份证号">
            <Input v-model="params.card_no" type="text" clearable placeholder="身份证号" class="headFormItemWidth" />
          </FormItem>
          <FormItem label="手机号">
            <Input v-model="params.tel" type="text" clearable placeholder="手机号" class="headFormItemWidth" />
          </FormItem>
          <FormItem label="审核">
            <Select v-model="params.state" placeholder="审核" class="headFormItemWidth" filterable clearable>
              <Option value="1">待审核</Option>
              <Option value="2">已通过</Option>
              <Option value="3">未通过</Option>
            </Select>
          </FormItem>
          <FormItem label="状态">
            <Select v-model="params.del_flag" placeholder="状态" class="headFormItemWidth" filterable clearable>
              <Option value="1">正常</Option>
              <Option value="2">停用</Option>
            </Select>
          </FormItem>
          <FormItem >
            <Button icon="md-search" type="primary" class="headFormItemButton" @click="search" >搜索</Button>
            <Button icon="md-redo" class="headFormItemButton" @click="reload()" >重置</Button>
          </FormItem>
        </Form>
        <Divider style="margin-top:0px;" />
      </template>
      <template v-slot:body>
        <template>
          <Button icon="md-add" type="success" class="headFormItemButton" @click="add()">新增</Button>
          <Button icon="md-trash" type="error" class="headFormItemButton" @click="delList">删除</Button>
        </template>
        <vxe-table border="outer" header-align="center" ref="my_table"
                   :loading="loading"
                   :data="tableData"
                   :stripe="true"
                   style="margin-top: 5px;margin-bottom: 10px"
                   :highlight-hover-row="true"
                   :scroll-x="{gt: 0}" align="center" show-overflow="tooltip">
          <vxe-table-column width="60" fixed="left" type="checkbox"></vxe-table-column>
          <vxe-table-column title="头像" min-width="80">
            <template v-slot="{ row }">
              <img :src="row.head_sculpture" preview width="40px" height="40px" />
            </template>
          </vxe-table-column>
          <vxe-table-column field="name" title="姓名" min-width="200"></vxe-table-column>
          <vxe-table-column field="tel" title="手机号" min-width="200"></vxe-table-column>
          <vxe-table-column field="sex" title="性别" min-width="50">
            <template v-slot="{ row }">
              <span v-if="row.sex === '1'">男</span>
              <span v-if="row.sex === '2'">女</span>
            </template>
          </vxe-table-column>
          <vxe-table-column field="age" title="年龄" min-width="50"></vxe-table-column>
          <vxe-table-column field="nurse_age" title="护龄" min-width="50"></vxe-table-column>
          <vxe-table-column field="card_no" title="证件号码" min-width="200"></vxe-table-column>
          <vxe-table-column field="state" title="审核" min-width="100">
            <template v-slot="{ row }">
              <Tag color="warning" v-show="row.state === '1'">待审核</Tag>
              <Tag color="success" v-show="row.state === '2'">已通过</Tag>
              <Tag color="primary" v-show="row.state === '3'">未通过</Tag>
            </template>
          </vxe-table-column>
          <vxe-table-column field="del_flag" title="状态" min-width="100">
            <template v-slot="{ row }">
              <i-Switch v-model="row.del_flag" size="large" true-color="#13ce66" false-color="#ff4949" true-value="1" false-value="2" @on-change="editState(row)">
                <template #open>
                  <span>正常</span>
                </template>
                <template #close>
                  <span>停用</span>
                </template>
              </i-Switch>
            </template>
          </vxe-table-column>
          <vxe-table-column width="200" title="操作">
            <template scp-layout="true" v-slot="{ row }">
              <ButtonGroup>
                <!-- <Button type="success" icon="md-mail" v-if="row.state === '1'" style="padding: 0" @click="approve(row)"></Button> -->
                <Button type="warning" icon="md-create" style="padding: 0" @click="edit(row)"></Button>
                <Button type="error" icon="md-trash" style="padding: 0" @click="del(row)"></Button>
              </ButtonGroup>
            </template>
          </vxe-table-column>
        </vxe-table>
        <Row type="flex" justify="end">
          <Page :current="params.pageNo" :total="params.totalRecord" show-sizer :page-size="params.pageSize" show-elevator
                @on-change="pageAction" @on-page-size-change="pageSizeChange"/>
        </Row>
      </template>
    </medicalCard>
    <Modal v-model="modal.show" :title="modal.title" width="750">
      <Row>
        <Col span="22" offset="1">
          <Form ref="formInline" :label-width="80" label-colon >
            <Row>
              <Col span="24">
                <FormItem label="证件号码" >
                  <Input  v-model="modal.data.card_no" type="text" clearable placeholder="证件号码"  />
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span="24">
                <FormItem label="头像">
                  <Row class="bench_search">
                    <div class="demo-upload-list" v-show="modal.data.head_sculpture">
                      <img :src="modal.data.head_sculpture" />
                    </div>
                    <Upload
                      ref="upload"
                      :show-upload-list="false"
                      :format="['jpg','jpeg','png']"
                      :max-size="2048"
                      :before-upload="handleBeforeUpload"
                      type="drag"
                      action="//jsonplaceholder.typicode.com/posts/"
                      style="display: inline-block;width:58px;">
                      <div style="width: 58px;height:58px;line-height: 58px;">
                        <Icon type="ios-camera" size="20"></Icon>
                      </div>
                    </Upload>
                  </Row>
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span="11">
                <FormItem label="姓名" class="formItem" style="float: left">
                  <Input  v-model="modal.data.name" type="text" clearable placeholder="姓名" class="headFormItemWidth" style="float: left" />
                </FormItem>
              </Col>
              <Col span="11" offset="2">
                <FormItem label="手机号" class="formItem">
                  <Input v-model="modal.data.tel" type="text" clearable placeholder="手机号"  class="headFormItemWidth" />
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span="11">
                <FormItem label="护龄" class="formItem" style="float: left">
                  <InputNumber :max="99999" :min="0" placeholder="排序" v-model="modal.data.nurse_age"  class="headFormItemWidth" style="float: left"  />
                </FormItem>
              </Col>
              <Col span="11" offset="2">
                <FormItem label="籍贯" class="formItem">
                  <Input  v-model="modal.data.native_place" type="text" clearable placeholder="籍贯" class="headFormItemWidth" />
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span="24">
                <FormItem label="所在地区" class="formItem" style="float: left;width: 100%">
                  <Cascader ref="selectCity" v-model="selectList" :data="cityList" filterable clearable style="width: 100%" />
                </FormItem>
              </Col>
            </Row>
            <Row>
              <FormItem label="住址" class="formItem" style="width: 100%">
                <Input  v-model="modal.data.address" type="text" clearable placeholder="住址" style="width: 100%" />
              </FormItem>
            </Row>
            <Row>
              <Col span="24">
                <FormItem label="个人简介">
                  <Input  v-model="modal.data.brief_introduction" type="textarea" clearable placeholder="请输入个人简介" :rows="7"  style="width: 100%;" />
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span="24">
                <FormItem label="身份证正面">
                  <Row class="bench_search">
                    <div class="demo-upload-list" v-show="modal.data.front_card">
                      <img :src="modal.data.front_card" />
                    </div>
                    <Upload
                      ref="upload"
                      :show-upload-list="false"
                      :format="['jpg','jpeg','png']"
                      :max-size="2048"
                      :before-upload="handleBeforeUpload2"
                      type="drag"
                      action="//jsonplaceholder.typicode.com/posts/"
                      style="display: inline-block;width:58px;">
                      <div style="width: 58px;height:58px;line-height: 58px;">
                        <Icon type="ios-camera" size="20"></Icon>
                      </div>
                    </Upload>
                  </Row>
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span="24">
                <FormItem label="身份证反面">
                  <Row class="bench_search">
                    <div class="demo-upload-list" v-show="modal.data.opposite_card">
                      <img :src="modal.data.opposite_card" />
                    </div>
                    <Upload
                      ref="upload"
                      :show-upload-list="false"
                      :format="['jpg','jpeg','png']"
                      :max-size="2048"
                      :before-upload="handleBeforeUpload3"
                      type="drag"
                      action="//jsonplaceholder.typicode.com/posts/"
                      style="display: inline-block;width:58px;">
                      <div style="width: 58px;height:58px;line-height: 58px;">
                        <Icon type="ios-camera" size="20"></Icon>
                      </div>
                    </Upload>
                  </Row>
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span="24">
                <FormItem label="资格证书">
                  <Row class="bench_search">
                    <div class="demo-upload-list" v-show="modal.data.qualification">
                      <img :src="modal.data.qualification" />
                    </div>
                    <Upload
                      ref="upload"
                      :show-upload-list="false"
                      :format="['jpg','jpeg','png']"
                      :max-size="2048"
                      :before-upload="handleBeforeUpload4"
                      type="drag"
                      action="//jsonplaceholder.typicode.com/posts/"
                      style="display: inline-block;width:58px;">
                      <div style="width: 58px;height:58px;line-height: 58px;">
                        <Icon type="ios-camera" size="20"></Icon>
                      </div>
                    </Upload>
                  </Row>
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span="24">
                <FormItem label="体检报告">
                  <Row class="bench_search">
                    <div class="demo-upload-list" v-show="modal.data.medical_report">
                      <img :src="modal.data.medical_report" />
                    </div>
                    <Upload
                      ref="upload"
                      :show-upload-list="false"
                      :format="['jpg','jpeg','png']"
                      :max-size="2048"
                      :before-upload="handleBeforeUpload5"
                      type="drag"
                      action="//jsonplaceholder.typicode.com/posts/"
                      style="display: inline-block;width:58px;">
                      <div style="width: 58px;height:58px;line-height: 58px;">
                        <Icon type="ios-camera" size="20"></Icon>
                      </div>
                    </Upload>
                  </Row>
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span="11">
                <FormItem label="状态" >
                  <RadioGroup v-model="modal.data.del_flag" type="button" button-style="solid">
                    <Radio label="1">正常</Radio>
                    <Radio label="2">停用</Radio>
                  </RadioGroup>
                </FormItem>
              </Col>
              <Col span="11" offset="2">
                <FormItem label="审核" style="float: right">
                  <RadioGroup v-model="modal.data.state" type="button" @on-change="changeState" button-style="solid">
                    <Radio label="1">待审核</Radio>
                    <Radio label="2">已通过</Radio>
                    <Radio label="3">未通过</Radio>
                  </RadioGroup>
                </FormItem>
              </Col>
            </Row>
            <Row v-if="modal.data.state == '3'">
              <Col span="24">
                <FormItem label="驳回原因" >
                  <Input  v-model="modal.data.reason" type="textarea" clearable placeholder="请输入驳回原因" :rows="7"  style="width: 100%;" />
                </FormItem>
              </Col>
            </Row>
          </Form>
        </Col>
      </Row>
      <template #footer>
        <Button @click="modal.show = false">取消</Button>
        <Button type="primary" @click="addOk()">确定</Button>
      </template>
    </Modal>
  </div>

</template>

<script>
import medicalCard from '@/view/medical-page/components/medical-card'
import {
  createUpLoadFiles,
  getAccompanyingPhysicianPageList,
  getSign,
  selectCityList,
  saveAccompanyingPhysician, deleteAccompanyingPhysician, updateAccompanyingPhysicianState
} from '@/api/medical'
export default {
  name: 'hospital-list',
  components: {
    medicalCard
  },
  data () {
    return {
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      loading: false,
      tableData: [],
      modal: {
        show: false,
        type: null,
        data: {},
        title: ''
      },
      modal2: {
        show: false,
        type: null,
        data: {},
        title: ''
      },
      cityList: [],
      selectList: []
    }
  },
  computed: {
  },
  inject: [
    'reload'
  ],
  methods: {
    search () {
      this.params.pageNo = 1
      this.params.totalRecord = 0
      this.init()
    },
    init () {
      this.loading = true
      getAccompanyingPhysicianPageList(this.params).then(ret => {
        if (ret.data.errcode === 0) {
          this.tableData = ret.data.data.results
          this.params.totalRecord = ret.data.data.totalRecord
          this.loading = false
        } else {
          this.$Message.error(ret.data.errmsg)
        }
      })
    },
    del (row) {
      this.$Modal.confirm({
        title: '<p style="color:#f60;text-align:center">\n' +
          '                    <Icon type="ios-information-circle"></Icon>\n' +
          '                    <span>删除操作</span>\n' +
          '                </p>',
        content: '<p>确定要执行该操作吗？</p>',
        width: 300,
        loading: true,
        onOk: () => {
          deleteAccompanyingPhysician({ accompanying_physician_id: row.accompanying_physician_id }).then(ret => {
            if (ret.data.errcode === 0) {
              this.$Message.success({
                content: '操作成功,\n' + ret.data.errmsg
              })
              this.init()
            } else {
              this.$Message.error({
                content: '操作失败,\n' + ret.data.errmsg
              })
            }
          })
          this.$Modal.remove()
        }
      })
    },
    delList () {
      let selectRecords = this.$refs.my_table.getCheckboxRecords()
      if (!selectRecords || selectRecords.length === 0) {
        this.$Message.error({
          content: '操作失败,\n' + '请选择删除项'
        })
        return
      }
      let array = selectRecords.map((item) => item.accompanying_physician_id)
      this.$Modal.confirm({
        title: '<p style="color:#f60;text-align:center">\n' +
          '                    <Icon type="ios-information-circle"></Icon>\n' +
          '                    <span>删除操作</span>\n' +
          '                </p>',
        content: '<p>确定要执行该操作吗？</p>',
        width: 300,
        loading: true,
        onOk: () => {
          deleteAccompanyingPhysician({ array: array }).then(ret => {
            if (ret.data.errcode === 0) {
              this.$Message.success({
                content: '操作成功,\n' + ret.data.errmsg
              })
              this.init()
            } else {
              this.$Message.error({
                content: '操作失败,\n' + ret.data.errmsg
              })
            }
          })
          this.$Modal.remove()
        }
      })
    },
    edit (row) {
      this.selectCityList()
      this.modal.data = row
      this.selectList = []
      if (row.province) {
        this.selectList.push(row.province)
      }
      if (row.city) {
        this.selectList.push(row.city)
      }
      if (row.area) {
        this.selectList.push(row.area)
      }
      this.modal.title = '修改'
      this.modal.type = 1
      this.modal.show = true
    },
    editState (row) {
      let params = {
        accompanying_physician_id: row.accompanying_physician_id,
        del_flag: row.del_flag
      }
      this.saveAccompanyingPhysician(params)
    },
    add () {
      this.modal.data = {}
      this.modal.data.nurse_age = 0
      this.modal.title = '新增'
      this.selectList = []
      this.selectCityList()
      this.modal.type = 0
      this.modal.show = true
    },
    approve (row) {
      this.$set(this.modal2.data, 'approve', '2')
      this.modal2.data.accompanying_physician_id = row.accompanying_physician_id
      this.modal2.title = '审核'
      this.modal2.show = true
    },
    approveOk () {
      updateAccompanyingPhysicianState(this.modal2.data).then(ret => {
        if (ret.data.errcode === 0) {
          this.modal2.show = false
          this.$Message.success({
            content: '操作成功,\n' + ret.data.errmsg
          })
          this.init()
        } else {
          this.$Message.error({
            content: '操作失败,\n' + ret.data.errmsg
          })
        }
      })
    },
    addOk () {
      if (this.selectList && this.selectList.length > 0) {
        if (this.selectList[0]) {
          this.modal.data.province = this.selectList[0]
        }
        if (this.selectList[1]) {
          this.modal.data.city = this.selectList[1]
        }
        if (this.selectList[2]) {
          this.modal.data.area = this.selectList[2]
        }
      } else {
        this.$Notice.error({
          title: '请选择所在地区！'
        })
        return
      }
      if (!this.modal.data.card_no) {
        this.$Notice.error({
          title: '请填写证件号码！'
        })
        return
      }
      if (!this.modal.data.name) {
        this.$Notice.error({
          title: '请填写姓名！'
        })
        return
      }
      if (!this.modal.data.name) {
        this.$Notice.error({
          title: '请填写姓名！'
        })
        return
      }
      if (!this.modal.data.tel) {
        this.$Notice.error({
          title: '请填写手机号码！'
        })
        return
      }
      if (!this.modal.data.nurse_age) {
        this.$Notice.error({
          title: '请填写护龄！'
        })
        return
      }
      if (!this.modal.data.front_card) {
        this.$Notice.error({
          title: '请上传身份证正面照片！'
        })
        return
      }
      if (!this.modal.data.opposite_card) {
        this.$Notice.error({
          title: '请上传身份证反面照片！'
        })
        return
      }
      if (!this.modal.data.qualification) {
        this.$Notice.error({
          title: '请上传资格证书！'
        })
        return
      }
      if (!this.modal.data.medical_report) {
        this.$Notice.error({
          title: '请上传体检报告！'
        })
        return
      }
      if (!this.modal.data.del_flag) {
        this.$Notice.error({
          title: '请选择状态！'
        })
        return
      }
      if (this.modal.data.state === '3' && (this.modal.data.reason === '' || this.modal.data.reason === undefined)) {
        this.$Notice.error({
          title: '请填写驳回原因！'
        })
        return
      }
      this.saveAccompanyingPhysician(this.modal.data)
    },
    saveAccompanyingPhysician (e) {
      saveAccompanyingPhysician(e).then(ret => {
        if (ret.data.errcode === 0) {
          this.modal.show = false
          this.$Message.success({
            content: '操作成功,\n' + ret.data.errmsg
          })
          this.init()
        } else {
          this.$Message.error({
            content: '操作失败,\n' + ret.data.errmsg
          })
        }
      })
    },
    selectCityList () {
      selectCityList(this.params).then(ret => {
        if (ret.data.errcode === 0) {
          this.cityList = ret.data.data
          this.cityList.forEach(function (temp) {
            if (temp.children) {
              temp.children.forEach(function (children) {
                if (children.children) {
                  children.children = []
                }
              })
            }
          })
        } else {
          this.$Message.error(ret.data.errmsg)
        }
      })
    },
    handleBeforeUpload (file) {
      // const check = this.imgList.length < 1
      // if (!check) {
      //   this.$Notice.warning({
      //     title: '最多上传1张图片'
      //   })
      //   return check
      // }
      let upPicData = {
        filePath: 'medical/hospital/images',
        fileName: '陪诊师头像',
        bindKey: 'head_sculpture'
      }
      this.beforeUpload(file, upPicData)
    },
    handleBeforeUpload2 (file) {
      let upPicData = {
        filePath: 'medical/hospital/images',
        fileName: '陪诊师身份证正面照',
        bindKey: 'front_card'
      }
      this.beforeUpload(file, upPicData)
    },
    handleBeforeUpload3 (file) {
      let upPicData = {
        filePath: 'medical/hospital/images',
        fileName: '陪诊师身份证反面照',
        bindKey: 'opposite_card'
      }
      this.beforeUpload(file, upPicData)
    },
    handleBeforeUpload4 (file) {
      let upPicData = {
        filePath: 'medical/hospital/images',
        fileName: '陪诊师资格证书',
        bindKey: 'qualification'
      }
      this.beforeUpload(file, upPicData)
    },
    handleBeforeUpload5 (file) {
      let upPicData = {
        filePath: 'medical/hospital/images',
        fileName: '陪诊师体检报告',
        bindKey: 'medical_report'
      }
      this.beforeUpload(file, upPicData)
    },
    beforeUpload (file, upPicData) {
      // upPicData.filePath = 'medical/hospital/images'
      var time = new Date().getTime()
      let timestamp = time.toString()
      upPicData.timestamp = timestamp
      let that = this
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => {
        let index = reader.result.indexOf('base64,') + 7
        upPicData.fileName = upPicData.fileName + timestamp + '.' + file.type.substring(6)
        upPicData.file = reader.result.substring(index)
        that.upPic(upPicData)
      }
      return false
    },
    upPic (fileData) {
      getSign({
        filePath: fileData.filePath,
        fileName: fileData.fileName,
        timestamp: fileData.timestamp
      }).then(res => {
        if (res.data.errcode === 0) {
          createUpLoadFiles(res.data.data.docking_url, {
            sign: res.data.data.sign,
            timestamp: fileData.timestamp,
            filePath: fileData.filePath,
            fileName: fileData.fileName,
            file: fileData.file
          }).then(ret => {
            if (ret.data.errcode === 0) {
              // this.modal.data[fileData.bindKey] = ret.data.data
              this.$set(this.modal.data, fileData.bindKey, ret.data.data)
              console.log(fileData.bindKey)
              console.log(this.modal.data[fileData.bindKey])
              this.$Message.success({
                content: '上传成功,\n' + ret.data.errmsg
              })
            } else {
              this.$Message.error({
                content: '上传失败,\n' + ret.data.errmsg
              })
            }
          })
        }
      })
    },
    pageAction (page) {
      this.params.pageNo = page
      this.init()
    },
    pageSizeChange (e) {
      this.params.pageSize = e
      this.init()
    },
    changeState (value) { // 未通过
      console.log('2222')
      console.log(this.modal.data.state, '2222')
      // if (this.modal.data.state === '3') {
      //   let that = this
      //   that.modal2.show = true
      // }
    }
  },
  watch: {
  },
  mounted () {
    this.init()
  }
}
</script>
<style scoped>
#mapHospitalAddress {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 500px;
}
.headFormItemWidth{
  width: 200px;
}
.headFormItemButton{
  margin-right: 10px;
}
.formItem{
  float: right;
}
</style>
